@import '../../../../styles/css/dashvariables.scss';

#dashboard {
  color: $dash-dashboard-text;
  background-size: cover;

  h4 {
    padding-bottom: 0.5em;
    text-align: center;
    color: lightgray;
  }

  .dashboard-widgets {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);

    .alert {
      text-shadow: none;
    }

    // exceptions
    .popover,
    .tooltip,
    .dash-status-fail {
      text-shadow: none;
    }
  }

  // override the basic alert state values
  .widget.alert {
    $black: #000;

    // #gradient > @include vertical(#ffb1ae, #ffa09c);
    .widget-heading,
    .environment-name,
    .deploy-view td:not(.servers-up):not(:first-child):not(.servers-down) {
      color: black;
    }
  }

  // add a halo around the alert icon
  .dash-status-fail {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
  }

  // the widget uses $dash-dashboard-bg to style between header arrows
  // so override the value to use a black
  .pipeline-view .pipeline-environment-header span:before {
    border-left-color: $bg-replacement;
  }

  .server-count {
    color: #777;
  }
}
